En xyberneticos nos muestran un bonito efecto que nos permite añadir una imagen con texto oculto que se muestra al pasar el cursor.
Para el ejemplo he añadido una imagen pero el autor ha creado una galería, es posible añadir cualquier número de imágenes siempre que tengamos en cuenta que la suma del ancho de las imágenes no sea superior al espacio donde vamos a añadirlo.
La galería del autor la podemos conseguir de la siguiente forma.
Si estamos utilizando jQuery seguramente ya tenemos añadido el siguiente script en nuestra plantilla, de no tenerlo lo añadimos antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Y a continuación el siguiente:

<script type='text/javascript'>
$(document).ready(function()
{
 $(&#39;.galleryImage&#39;).hover(
  function()
  {

  $(this).find(&#39;img&#39;).animate(
                { width:100,
                  marginTop:10,
                  marginLeft:10
                }, 500);

   },
   function()
   {

    $(this).find(&#39;img&#39;).animate(
                 {width:325,
                  marginTop:0,
                  marginLeft:0
                },300);

   });
});
</script>

Los estilos los añadimos antes de ]]></b:skin>

.galleryContainer
{
width: 1024px; /*  Ancho del contenido */ 
}
.galleryImage {   /* Las imágenes */ 
     background-color:black;
     width:325px;
     height:260px;
     overflow:hidden;
     margin:5px;
     float:left;
}
.info{   /*  Texto adicional */ 
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{  /* Títulos */ 
color:gray;
}
.info p {
color:white;
}
.clear {
clear:both;
margin-top:10px;
}

Una vez tenemos añadido lo anterior guardamos los cambios y en un gadget de HTML incluimos las imágenes y el texto:

<div class="galleryContainer">
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
</div>
MexaaC

WOW

Responder
Daniel

Gracias Gema. Un 10 por este tesoro que has encontrado.

Eres grande.

Responder
Daniel

Hola Gema, tengo un pequeño problema. He utilizado este efecto para adornar la imagen que incluyo en cada post. En principio, creo que hay que ajustar el tamaño de la imagen al tamaño del contenedor negro. Una vez hecho esto me sigue quedando una parte del contenedor negro visible por arriba de la imagen.

¿Me podrías ayudar? Te dejo la url donde puedes ver el problema http://www.recursosdeautoayuda.com/2010/07/quien-soy-mi-historia-personal.html

Responder
fotografo1953

Me ha gustado Mucho.
Felices VACACIONES.
Tomás

Responder
Gem@

:: Saludos N.G. - C.W. :)

:: Daniel los estilos de la entrada son para la galería, puedes intentarlo en galleryContainer modificando en ancho (width) y ponerle el mismo de la imagen ya que sólo es una.
Y en la entrada que añadiste la imagen veo el código que proporciona Blogger cuando subimos una imagen, eso hay que limpiarlo porque lo que hace falta solamente es la url de la imagen tal y como el html dice, intenta también añadirlo todo seguido por ejemplo:

<div class="galleryContainer">
<div class="galleryImage"><img src="url-imagen">
<div class="info"><h2>Título</h2>Texto adicional.
</div></div></div>

:: Me alegra que te guste Tomás, que sean felices para ti también y saques muchas fotos :D

Responder
Unknown

Guau Piedra Preciosa, qué bonito :D
Muy bien 10 felicitado!

Buen fin de semana, las noticias dicen que por allí hace musho calor, disfruta de la playa.

Responder
felix

Gemm@...

Wonderfull¡¡ obnuvilado y patidifisu me he quedado :O. Intentare implementarlo porque el efecto es genial, y ademas se puede añadir informacion extra a la imagen de un forma visualmente espectacular. Gracias hermosa¡

Besos

Responder
Daniel

Bueno Gema, ya lo he solucionado, muchas gracias.

He jugado con los tamaños que aparecen en el script:


$(this).find('img').animate(
{ width:100,
marginTop:10,
marginLeft:10
}, 400);

},
function()
{

$(this).find('img').animate(
{width:400,
marginTop:0,
marginLeft:0
},400);

Los he igualado a 400 salvo el de la miniatura a 100px.

Luego en los estilos de la galería y de cada imagen en particular he puesto el ancho en 400.

Gracias por tu ayuda.

Responder
Gem@

:: Me alegra que te guste Graciela, la verdad que es un efecto muy atractivo. Hace muchaaa calor pero que mucha y nos daremos un bañito en la playa para refrescarnos. Que el fin de semana sea lindo para ti también :)

:: Saludos Felix Casanova me alegra que te guste tanto, gracias por comentar :D

:: EstUpendo Daniel :D

Responder
MamaNunes

:D Muy biemmmm Gema!!! Gracias! Lo voy a probar.

Besos!

Responder
José GDF

He encontrado una "puerta de atrás" en Blogger para poder comentar en Linux sin problemas, ¡je, je, je! Así que de aquí a un tiempo es posible que me veas más por aquí. :)

No podía evitar decirte lo mucho que me gusta este truco y que tengo grandes planes para él, a pesar de tener en la actualidad el blog parado.

De momento no desvelo nada más :D

Responder
Gem@

:: Saludos MamaNunes es una GRAN alegría tenerte por aquí :D

:: ¿No desvelas nada más José GDF ? y de la puerta de entrada tampoco?? mira que tengo usuarios de Linux en la puerta esperando y sufridos ellos me siguen vía mail, comparte hombre comparte jajaja

Responder
Jose

Hola Gem@.
Me encanta. Ya lo he colocado en un post de prueba y, al igual que Daniel, he tenido problemas para quitar ese pequeño borde que se ve en la parte izquierda y arriba. Lo he medio solucionado, pero lo que no consigo (fallo de novato, imagino), es centrar la imagen en el post, pues con el típico "center", lo que me centra es lo de dentro, pero no el bloque. ¿Me puedes ayudar?
Por cierto, este curso que viene vuelvo a los más peques y ya estoy preparando otro blog para ellos. Esto es un no parar, jeje.
Besitos y disfruta las vacaciones.

Responder
José GDF

No desvelo nada más, pero del uso que le voy a dar a este Zoom... Que por cierto, me va de cine en las pruebas que hice ayer, aunque tuve que hacer unos ajustes en el CSS, porque la hoja de estilos de la plantilla me desplazaba las imágenes a la derecha y quedaba mal.

También he jugado con los valores del script, como ha hecho Daniel, especialmente poniendo ese mismo margen del CSS, porque si no no regresa a su posición original bien.

En cuanto a lo de entrar a comentar aquí desde linux, es muy sencillo: yo sigo el blog por el Google Reader, al cual llega el contenido completo, y eso incluye el título. Sabiendo el título, y esperando un tiempo prudencial de unas horas, lo busco en Google, y entro a la página guardada en caché.

Hasta ahí no hay novedad. La única diferencia es que he utilizado el antiguo editor (de hecho, lo estoy usando ahora mismo), que como no tiene dirección ilegal, sin ningún guión caprichoso, me deja comentar sin problemas desde Ubuntu.

Es tan fácil que podemos decir eso de... ¿Cómo no se nos ocurrió antes?

A ver si le sirve a alguien más.

Responder
Gem@

:: Hola Jose mucho tiempo sin saber de ti!! ya veo que sigues con tus ansias de crear un blog para cada nuevo curso, está muy bien eso de poner al alcance de todos información.
Sobre el problemilla que comentas mira donde dice:
.galleryImage { /* Las imágenes */
background-color:black;
width:325px;
height:260px;
overflow:hidden;
margin:5px;
float:left;
}

Intenta suprimir la flotación que está a la izquierda con float:left, creo que por eso no acepta el centrado aunque lo añadas con html ;)

:: José GDF con lo del tiempo prudencial de unas horas me has matado jajajajaja de todas formas es una opción una buena salida, o mejor dicho entrada. ¿Cómo no se nos ocurrió antes? pues mira yo tampoco lo sé :S
Gracias por compartirlo y me alegra mucho tenerte por aquí entres por donde entres :D

Responder
Jose

Hola otra vez, Gem@. Ya había intentado lo que me dices, pero no me funciona. Le he dado mil vueltas y no consigo dar con la solución. El caso es que en tu post, la foto de la ovejita está perfectamente centrada. No sé...
Si se te ocurre algo, me cuentas.
Besitos.

Responder
Gem@

:: Por mi post no debes guiarte Jose, la imagen está incluida en un iframe porque no utilizo jQuery y si lo añadiera crearía conflictos con otros scripts, pero si he probado lo que te decía antes de responderte y funciona perfectamente.
Puedo ver tu ejemplo en alguna parte??

Responder
Jose

Gracias Gem@ una vez más por tus rápidas respuestas. Voy a poner el ejemplo en quintolandia para que veas cómo queda y saber si tiene solución.
Un beso

Responder
Gem@

:: Perfecto Jose :)
Otro beso para ti.

Responder
José GDF

Lo de esperar un tiempo es para que Google pueda indexar tu página y poder entrar en ella por su caché. De otra manera no podría.

A veces da la casualidad que veo en el feed la entrada en el mismo instante que se publica, o solo unos minutos después, y no puedo hacer lo que te he comentado antes, de ahí lo de esperar ese tiempo prudencial, ¡je, je, je!

Responder
Gem@

:: José GDF la información que aportas ha llegado en su justo momento porque precisamente k_nelita me comentaba que no puede acceder porque ahora utiliza Linux y le copié la explicación que me habías dado.
De todas formas estaría bien que cuando pongas al día el blog hicieras una entrada con tu descubrimiento dedicada a los usuarios de Linux y encantada enlazaré esa entrada. :D

Responder
Jose

BUeno, Gem@, ya te he puesto el ejemplo en mi blog de Quintolandia. Sigo mirando, pero nada. Cuando tengas un huequecito, le echas un vistazo a ver qué te parece, ok?
besitos :)

Responder
Gem@

:: Jose prueba a sustituir los estilos de galleryContainer y galleryImage por los siguientes y añade en la entrada <div class="galleryContainer"> no estoy muy segura si no lo he visto o no estaba añadido.

.galleryContainer{
float:center;
width: 375px; /* Ancho del contenido */
margin-left: 150px ;
}

.galleryImage { /* Las imágenes */
background-color:black;
width:335px;
height:268px;
overflow:hidden;
margin:5px;
float:left;
}

Responder
Jose

Hola Gem@. Como siempre, has dado con la solución.
Simplemente era añadir margen al container, pero en lugar de 150, le he dado 70 y se ha centrado. He eliminado el float:center y no ha pasado nada, y es que leí por ahí hace tiempo que el float sólo funciona para left y right (bueno, y inherit y no sé qué más).
Bueno, lo importante es que ya está. Ya te pasaré la dirección del nuevo blog para peques de 3 años.
Besitos y mil gracias. En unos días, estoy por tu tierra a comerme un buen arrocito. ;)

Responder
Gem@

:: Me alegra esté todo resuelto Jose, y estaré encantada de ver ese nuevo blog ¿peques de tres años dices? qué maravilla!!
Que lo pases bien y disfruta las vacaciones :D

Responder
José GDF

Será un placer, Gem@, hacer lo que dices, pero tardaré un poco todavía en "reabrir" el blog. Ahora cojo las vacaciones en el trabajo, y si todo marcha bien, quizá en tres semanas lo haga, pero tiene que ir todo muuuuy bien. Y si todo sale como espero, y si no decides antes explicarlo tú misma, podría ser la segunda o tercera entrada que escriba.

Este truquito del zoom tiene todo un filón que explotar. Además de poder usarlo como galería de imágenes con información dentro, se puede poner simplemente como imagen ilustrativa de un post cualquiera, y colocar dentro la referencia y enlace al autor original, y su licencia de uso.

La única pega es el tamaño de las imágenes que, en principio, habrían de tener el mismo tamaño todas, pero hay un truco: usar CSS dentro del HTML.

Por ejemplo, yo estoy usando un tamaño de 290 x 205 para las galerías de prueba que estoy haciendo. Si lo quisiera usar en una entrada para una imagen de tamaño 400 x 400, dentro del div de galleryimage sería poner un style="width:400px;height:400px;".

¿Inconveniente de hacerlo así? Que en vez de poner el script en la plantilla, tendría que ponerlo en la entrada o en la página estática correspondiente. Y de utilizar dos tamaños distintos, habría que usar dos scripts y cambiar los nombres de las clases en el segundo script y en la segunda imagen... Aunque esto último aún no lo he probado.

Así explicado suena complicado, pero no es tanto como hacerlo.

Responder
Gem@

:: Complicado no sé si será pero hay que leerlo dos veces :D el problema que comentas de tener que añadir dos nombres distintos es muy común cuando utilizamos unos mismos estilos para cosas diferentes. Estaré pendiente de tus resultados, no hay prisa :)

Responder
Carlos Hernández

Hola Gema,
Este efecto me ha funcionado muy bien, gracias por publicarlo.
Solo tengo un problemita. Cuando das clic en www.defendiendoelevangelio.org y carga la pagina las imagenes salen MUY grandes y al pasar el mouse encima de ellas funciona el efecto y las imagenes quedan a la medida que yo quería.

¿Qué debería hacer?
Gracias

Responder
Gem@

:: Carlos Hernández veo su ejemplo dela misma forma que el que añadí en esta entrada, la imagen inicial mide width:325px; que es el ancho y height:260px; de alto, esa imagen es la que se muestra siempre y deja paso a la de menor tamaño y la información al pasar el cursor.
No veo ningún problema.

Responder
Talismán Dreams

Me lo guardo para probarlo, que me gusta mucho para algunas cositas que tengo en mente :)

¡Gracias!

Gem@

Esas mentes inquietas y trabajadoras, que bueno :D

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top